<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image class="roundImage" :src="baseUrl+'/profile/upload/ban1.jpg'" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image class="roundImage" :src="baseUrl+'/profile/upload/ban2.jpg'"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image class="roundImage" :src="baseUrl+'/profile/upload/ban3.jpg'" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航栏 -->
		<uni-grid :column="4" :highlight="true" :show-border="false">
			<view class="grid-item-box animated-item" style="background-color: #fff;" @click="toStudyLocation" :style="{animationDelay: '0.1s'}">
				<uni-icons type="location" :size="30" color="#000000" />
				<text class="text">研旅地点</text>
			</view>
			<view class="grid-item-box animated-item" style="background-color: #fff;" @click="toStudyPunch" :style="{animationDelay: '0.2s'}">
				<uni-icons type="compose" :size="30" color="#a3e0e3" />
				<text class="text">研旅打卡</text>
			</view>
			<view class="grid-item-box animated-item" style="background-color: #fff;" @click="news" :style="{animationDelay: '0.3s'}">
				<uni-icons type="fire" :size="30" color="#ff0000" />
				<text class="text">新闻动态</text>
			</view>
			<view class="grid-item-box animated-item" style="background-color: #fff;" @click="toCourse" :style="{animationDelay: '0.4s'}">
				<uni-icons type="videocam-filled" :size="30" color="#ff0000" />
				<text class="text">在线课程</text>
			</view>
		</uni-grid>
		<!-- 在线课程 -->
		<view class="online-course">
			<view class="course-header" @click="openHotCourse">
				<text class="head-title">推荐课程</text>
				<text class="more">更多></text>
			</view>

			<view class="course-grid">
				<view class="course-row">
					<view class="course-item animated-item" v-for="(item, index) in courseList.slice(0,2)" :key="index"
						@click="openCourse(item.courseId)" :style="{animationDelay: `${0.5 + index*0.1}s`}">
						<u-image radius="15" :showLoading="true" :src="baseUrl+item.coverImage" width="330rpx" height="220rpx"
							mode="aspectFill"></u-image>
						<view class="course-info">
							<text class="course-title">{{ item.title }}</text>
							<view class="course-meta">
								<text class="creator">{{ item.createBy }}</text>
								<text class="create-time">{{ formatDate(item.createTime) }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="course-row">
					<view class="course-item animated-item" v-for="(item, index) in courseList.slice(2,4)" :key="index+2"
						@click="openCourse(item.courseId)" :style="{animationDelay: `${0.7 + index*0.1}s`}">
						<u-image radius="15" :showLoading="true" :src="baseUrl+item.coverImage" width="330rpx" height="220rpx"
							mode="aspectFill"></u-image>
						<view class="course-info">
							<text class="course-title">{{ item.title }}</text>
							<view class="course-meta">
								<text class="creator">{{ item.createBy }}</text>
								<text class="create-time">{{ formatDate(item.createTime) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../config';
	export default {
		data() {
			return {
				baseUrl:config.baseUrl,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				courseList: [{
						courseId: 1,
						title: '劳动研学入门课程',
						coverImage: '/profile/upload/ban4.jpg',
						createBy: '林老师',
						createTime: '2025-04-13 09:30:00'
					},
					{
						courseId: 2,
						title: '乡村文化体验课程',
						coverImage: '/profile/upload/ban5.jpg',
						createBy: '林老师',
						createTime: '2025-04-13 09:30:00'
					},
					{
						courseId: 3,
						title: '自然生态研学课程',
						coverImage: '/profile/upload/ban6.jpg',
						createBy: '林老师',
						createTime: '2025-04-14 09:30:00'
					},
					{
						courseId: 4,
						title: '传统文化研学课程',
						coverImage: '/profile/upload/ban7.jpg',
						createBy: '林老师',
						createTime: '2025-04-14 09:30:00'
					}
				]
			}
		},
		methods: {
			toCourse() {
				uni.navigateTo({
					url: '/pages/index/hotCourse/index'
				});
			},
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getMonth()+1}月${date.getDate()}日`;
			},
			openCourse(courseId) {
				uni.navigateTo({
					url: `/pages/index/hotCourse/detail?courseId=${courseId}`
				});
			},
			news() {
				uni.navigateTo({
					url: '/pages/index/news/index'
				});
			},
			toStudyLocation() {
				uni.navigateTo({
					url: '/pages/index/studyLocation/index'
				});
			},
			toStudyPunch() {
				uni.navigateTo({
					url: '/pages/index/studyPunch/index'
				});
			},
			openHotCourse() {
				uni.navigateTo({
					url: '/pages/index/hotCourse/index'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		line-height: inherit;
	}

	.content {
		background-color: white;
		margin: 0;
		padding: 15px;
		font-size: 14px;
		min-height: 100vh;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;

		.swiper {
			height: 420rpx;

			.swiper-item {
				display: block;
				height: 420rpx;
				line-height: 420rpx;
				text-align: center;

				.roundImage {
					border-radius: 25px;
				}
			}
		}
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.online-course {
		margin-top: 15px;
		padding: 0 15rpx;

		.course-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 0 10rpx;

			.head-title {
				font-size: 34rpx;
				font-weight: bold;
				color: #303133;
			}

			.more {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.course-grid {
			display: flex;
			flex-direction: column;
			gap: 30rpx;
		}

		.course-row {
			display: flex;
			justify-content: space-between;
			gap: 25rpx;
		}

		.course-item {
			flex: 1;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.course-info {
			padding: 20rpx;

			.course-title {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: #303133;
				margin-bottom: 15rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.course-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.creator {
					font-size: 24rpx;
					color: #606266;
				}

				.create-time {
					font-size: 22rpx;
					color: #909399;
				}
			}
		}
	}

	/* 新增动画样式 */
	.animated-item {
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>